<template>
  <div style="width: 1200px;margin: 0 auto">

    <el-row style="background-color: white">
      <el-col :span="5">
        <p style="font-size: 28px;margin: 10px">正在热映</p>
      </el-col>
      <el-col :span="19">
        <el-menu mode="horizontal" default-active="1" active-text-color="orange">
          <el-menu-item index="1">高分</el-menu-item>
          <el-menu-item index="2">华语</el-menu-item>
          <el-menu-item index="3">欧美</el-menu-item>
          <el-menu-item index="4">港片</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
<!--  内容列表开始  -->
    <div class="common-layout">
      <el-container>
        <el-aside width="900px" style="overflow: inherit">
          <el-row :gutter="20">
            <el-col :span="6" v-for="c in contentArr" style="margin: 10px 0" >
              <div class="movie-box">
                <el-card class="movie-card">
                  <div>
                    <router-link to="/movie">
                      <img :src="c.imgUrl" style="width: 100%;height: 230px">
                    </router-link>
                  </div>
                  <p style="text-align: center">{{c.title}}</p>
                  <div style="text-align: center">
                    <el-button
                        type="primary"
                        tag="a"
                        href=""
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                      <router-link to="/cinemas" style="color: white">
                        购票
                      </router-link>
                    </el-button>
                  </div>
                </el-card>
                <div class="movie-descr">
                  <h1>{{c.head}}</h1>
                  <h5>{{c.label}}</h5>
                  <h5>{{c.message}}</h5>
                  <h5>{{c.director}}</h5>
                  <h5>{{c.actor}}</h5>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" v-for="c in contentArr" style="margin: 10px 0" >
              <div class="movie-box">
                <el-card class="movie-card">
                  <div>
                    <router-link to="movie">
                    <img :src="c.imgUrl" style="width: 100%;height: 230px">
                    </router-link>
                  </div>

                  <p style="text-align: center">{{c.title}}</p>
                  <div style="text-align: center">
                    <el-button
                        type="primary"
                        tag="a"
                        href=""
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                      购票
                    </el-button>
                  </div>
                </el-card>
                <div class="movie-descr">
                  <h1>{{c.head}}</h1>
                  <h5>{{c.label}}</h5>
                  <h5>{{c.message}}</h5>
                  <h5>{{c.director}}</h5>
                  <h5>{{c.actor}}</h5>
                </div>
              </div>
            </el-col>
          </el-row>

<!--    即将上映      -->
          <el-row style="background-color: white">
          <el-col :span="5">
            <p style="font-size: 28px;margin: 10px">即将上映</p>
          </el-col>
          <el-col :span="19">
            <el-menu mode="horizontal" default-active="1" active-text-color="orange">
              <el-menu-item index="1">高分</el-menu-item>
              <el-menu-item index="2">华语</el-menu-item>
              <el-menu-item index="3">欧美</el-menu-item>
              <el-menu-item index="4">港片</el-menu-item>
            </el-menu>
          </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" v-for="c in contentArr" style="margin: 10px 0" >
              <div class="movie-box">
                <el-card class="movie-card">
                  <div>
                    <router-link to="movie">
                    <img :src="c.imgUrl" style="width: 100%;height: 230px">
                    </router-link>
                  </div>
                  <p style="text-align: center">{{c.title}}</p>
                    <div style="text-align: center">
                      <el-button
                          type="primary"
                          tag="a"
                          target="_blank"
                          rel="noopener noreferrer"
                      >
                        购票
                      </el-button>
                    </div>
                </el-card>
                <div class="movie-descr">
                  <h1>{{c.head}}</h1>
                  <h5>{{c.label}}</h5>
                  <h5>{{c.message}}</h5>
                  <h5>{{c.director}}</h5>
                  <h5>{{c.actor}}</h5>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" v-for="c in contentArr" style="margin: 10px 0" >
              <div class="movie-box">
                <el-card class="movie-card">
                  <div>
                    <router-link to="movie">
                    <img :src="c.imgUrl" style="width: 100%;height: 230px">
                    </router-link>
                  </div>
                  <p style="text-align: center">{{c.title}}</p>
                  <div style="text-align: center">
                    <el-button
                        type="primary"
                        tag="a"
                        href=""
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                      购票
                    </el-button>
                  </div>
                </el-card>
                <div class="movie-descr">
                  <h1>{{c.head}}</h1>
                  <h5>{{c.label}}</h5>
                  <h5>{{c.message}}</h5>
                  <h5>{{c.director}}</h5>
                  <h5>{{c.actor}}</h5>
                </div>
              </div>
            </el-col>
          </el-row>

          <div style="text-align: center">
            <el-button>点击加载更多</el-button>
          </div>
        </el-aside>
        <el-main>
          <div>
            <div>
              <h2>今日票房
                <span>
                  <a href="" style="float: right">更多榜单</a>
                </span>
              </h2>
            </div>
            <div>
              <table>
                <tbody>
                  <tr>
                    <td class="order">1</td>
                    <td class="title"><a onclick="moreurl(this, {from:'mv_rk'})" href="https://movie.douban.com/subject/35633650/">坠楼死亡的剖析</a></td>
                  </tr>
                  <tr>
                    <td class="order">2</td>
                    <td class="title"><a onclick="moreurl(this, {from:'mv_rk'})" href="https://movie.douban.com/subject/36218052/">德黑兰七冬</a></td>
                  </tr>
                  <tr>
                    <td class="order">3</td>
                    <td class="title"><a onclick="moreurl(this, {from:'mv_rk'})" href="https://movie.douban.com/subject/30454682/">自由之声</a></td>
                  </tr>
                  <tr>
                    <td class="order">4</td>
                    <td class="title"><a onclick="moreurl(this, {from:'mv_rk'})" href="https://movie.douban.com/subject/35724543/">亨利·休格的神奇故事</a></td>
                  </tr>
                  <tr>
                    <td class="order">5</td>
                    <td class="title"><a onclick="moreurl(this, {from:'mv_rk'})" href="https://movie.douban.com/subject/33455093/">石门</a></td>
                  </tr>
                  <tr>
                    <td class="order">6</td>
                    <td class="title"><a onclick="moreurl(this, {from:'mv_rk'})" href="https://movie.douban.com/subject/35512636/">湿沙咖啡馆</a></td>
                  </tr>
                  <tr>
                    <td class="order">7</td>
                    <td class="title"><a onclick="moreurl(this, {from:'mv_rk'})" href="https://movie.douban.com/subject/35603697/">冷血动物</a></td>
                  </tr>
                  <tr>
                    <td class="order">8</td>
                    <td class="title"><a onclick="moreurl(this, {from:'mv_rk'})" href="https://movie.douban.com/subject/35925098/">公园的沙池</a></td>
                  </tr>
                  <tr>
                    <td class="order">9</td>
                    <td class="title"><a onclick="moreurl(this, {from:'mv_rk'})" href="https://movie.douban.com/subject/35736400/">伸冤人3</a></td>
                  </tr>
                  <tr>
                    <td class="order">10</td>
                    <td class="title"><a onclick="moreurl(this, {from:'mv_rk'})" href="https://movie.douban.com/subject/35642187/">无处逢生</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
    <!--  内容列表结束  -->
<!--  食谱相关结束  -->
  </div>
</template>

<script setup>
  import {ref} from "vue";

  const contentArr = ref([
    {
      "id": 27,
      "title": "志愿军：雄兵出击",
      "imgUrl": "https://p0.pipi.cn/mmdb/fb738651be1ddd16bd11e50734be6f41e8fae.jpg?imageView2/1/w/160/h/220",
      "head":"志愿军：雄兵出击 2023",
      "label":"剧情 历史 战争",
      "message":"140分钟 中国大陆",
      "director":"导演 陈凯歌",
      "actor":"主演 唐国强/王砚辉/章子怡"
    },
    {
      "id": 18,
      "title": "前任4：英年早婚",
      "imgUrl": "/imgs/img_2.jpg",
      "head":"前任4：英年早婚",
      "label":"爱情 喜剧",
      "message":"129分钟 中国大陆",
      "director":"导演 田羽生",
      "actor":"主演 韩庚/郑凯/于文文"
    },
    {
      "id": 17,
      "title": "坚如磐石",
      "imgUrl": "/imgs/img.png",
      "head":"坚如磐石",
      "label":"剧情 犯罪 悬疑",
      "message":"127分钟 中国大陆",
      "director":"导演 张艺谋",
      "actor":"主演 雷佳音/张国立/周冬雨"
    },
    {
      "id": 16,
      "title": "莫斯科行动",
      "imgUrl": "/imgs/img_1.jpg",
      "head":"莫斯科行动",
      "label":"剧情 犯罪 动作",
      "message":"128分钟 中国大陆",
      "director":"导演 邱礼涛",
      "actor":"主演 张涵予/刘德华/文咏珊"
    },
  ])
</script>

<style scoped>
  td{
    border-bottom: 1px solid #eaeaea;
    padding: 7px 0;
  }
  a:link {
    color: #37a;
    text-decoration: none;
  }
  a:link:hover{
    background-color: #d8d8d8;
  }

  .movie-box {
    position: relative;
    width: 100%;
  }
  .movie-descr {
    display: none;
    position: absolute;
    top: 0;
    right: -100%;
    width: 240px;
    height: 220px;
    background-color: white;
    z-index: 99;
    padding-left: 20px;
  }
  .movie-card:hover+.movie-descr {
    display: block;
  }



</style>